<template>
  <div v-loading="loading" class="clearfix">
    <el-row>
      <el-col :span="16">
        <el-form
          ref="item"
          :model="item"
          :rules="rules"
          label-width="100px"
          :class="$style.assignWidth"
        >
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="头像：">
                <uploadImg
                  remark="运营头像"
                  :list="photoList"
                  :type-code="dics == {} ? dics.IMAGE_HEAD.dicCode :''"
                  @changeadvert="changeadvert"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="昵称：" prop="nickName">
                <el-input v-model="item.nickName" placeholder="请输入昵称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="真实姓名：" prop="fullName">
                <el-input v-model="item.fullName" placeholder="请输入真实姓名" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="账号类型：" prop="type">
                <el-select v-model="item.type" :disabled="item.type===0" placeholder="请选择账号类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号：" prop="idNumber">
                <el-input v-model="item.idNumber" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="手机号码：" prop="phone">
                <el-input v-model="item.phone" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联账号：" prop="userName">
                <el-autocomplete
                  v-model="item.userName"
                  style="width:215px;"
                  class="inline-input"
                  :fetch-suggestions="querySearch"
                  placeholder="请选择用户账号"
                  :trigger-on-focus="false"
                  @select="handleSelect"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="职务：">
                <el-input v-model="item.job" placeholder="请输入职务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="公司：" prop="company">
                <el-input v-model="item.company" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="邮箱：" prop="email">
                <el-input v-model="item.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生日：">
                <el-date-picker
                  v-model="item.birthday"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择生日"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="性别：">
                <el-radio v-model="item.sex" label="0">男</el-radio>
                <el-radio v-model="item.sex" label="1">女</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分配会员：">
                <el-checkbox v-model="item.accept" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="8">
              <el-form-item label="项目负责人：">
                <el-checkbox v-model="item.projectLeader" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="width:1030px;">
            <el-col :span="24">
              <el-form-item label="客户所在地：">
                <el-select
                  v-model="item.province"
                  :class="$style.select"
                  placeholder="请选择"
                  @change="changeProCode"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
                <el-select
                  v-model="item.city"
                  :class="$style.select"
                  placeholder="请选择"
                  @change="changeProCode"
                >
                  <el-option
                    v-for="item in citys"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
                <el-select v-model="item.county" :class="$style.select" placeholder="请选择">
                  <el-option
                    v-for="item in countys"
                    :key="item.areaCode"
                    :label="item.areaName"
                    :value="item.areaCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="width:1000px;">
            <el-col :span="16">
              <el-form-item style="textAlign:center;marginTop:30px;">
                <el-button type="primary" @click="submit">保 存</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const item = {
  headPortrait: '', // 头像
  nickName: '', // 昵称
  type: '', // 账号类型
  company: '', // 公司
  job: '', // 职务
  phone: '', // 手机
  email: '', // 邮箱
  fullName: '', // 真实姓名
  sex: '0', // 性别
  birthday: '', // 生日
  idNumber: '', // 身份证号
  province: '', // 省
  city: '', // 市
  county: '', // 区
  grouping: '',
  provinceName: '',
  cityName: '',
  countyName: '',
  userName: '',
  accept: '',
  projectLeader: ''
}

import uploadImg from '~/components/commom/uploadImg';
import mmUrl from '~/utils/utilUrl';
import regular from '~/utils/regular';
export default {
  components: {
    uploadImg
  },
  props: ['id'],
  data() {
    return {
      restaurants: [],
      userId: '',
      userName: '',
      dataId: this.$props.id,
      isCreate: this.$props.id === 'create',
      loading: true,
      photoList: [],
      item: JSON.parse(JSON.stringify(item)),
      provinceList: [],
      canChangeProCode: true,
      rules: {
        phone: regular.phone,
        idNumber: regular.identity,
        type: regular.requireChange,
        fullName: regular.require1,
        nickName: regular.require,
        company: regular.require2,
        email: regular.email1,
        grouping: regular.requireChange,
        userName: [
          {
            trigger: 'change',
            validator: this.checkConnect
          }
        ]
      },
      countyList: [],
      cityList: [],
      countys: [],
      citys: [],
      dics: [],
      options: [
        {
          label: '投资顾问',
          value: 1
        },
        {
          label: '公司账户',
          value: 2
        },
        {
          label: '运营账户',
          value: 3
        }
      ]
    }
  },
  watch: {
    'item.province'(newd) {
      if (!this.canChangeProCode) {
        return false
      }
      this.item.city = '';
      this.item.county = '';
      this.citys = this.cityList.filter(v => v.parentCode === newd)
      this.countys = []
      let result = this.provinceList.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.provinceName = result[0].areaName
      }
    },
    'item.city'(newd) {
      if (!this.canChangeProCode) {
        return false
      }
      this.item.county = '';
      this.countys = this.countyList.filter(v => v.parentCode === newd)
      let result = this.citys.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.cityName = result[0].areaName
      }
    },
    'item.county'(newd) {
      const result = this.countys.filter(v => v.areaCode === newd)
      if (result.length) {
        this.item.countyName = result[0].areaName
      }
    }
  },
  mounted() {
    this.getInit()
    this.initgetUsers()
  },
  methods: {
    changeProCode() {
      this.canChangeProCode = true
    },
    changeadvert(res) {
      this.item.headPortrait = res.fileUrl
    },
    getInit() {
      this.$post({
        url: this.isCreate ? mmUrl.member.loadCreate : mmUrl.member.loadEdit,
        data: {
          id: this.isCreate ? '' : this.dataId
        }
      }).then(res => {
        this.dics = res.dicsMap
        this.provinceList = res.areas.provinces
        this.countyList = res.areas.countys
        this.cityList = res.areas.citys
        this.loading = false
        if (!this.isCreate) {
          this.item = res.item
          this.userId = res.userId
          this.userName = res.userName
          this.$set(this.item, 'userName', res.userName)
          this.$set(this.item, 'accept', res.accept)
          this.$set(this.item, 'projectLeader', res.projectLeader)
          this.canChangeProCode = false
          this.photoList = [{ fileUrl: res.item.headPortrait }]
          this.citys = this.cityList.filter(
            v => res.item.province === v.parentCode
          )
          this.countys = this.countyList.filter(
            v => res.item.city === v.parentCode
          )
        }
      })
    },
    initgetUsers() {
      this.$post({
        url: mmUrl.user.getAllUser
      }).then(res => {
        this.restaurants = res.map(v => ({
          value: `${v.userName}(${v.userCode})`,
          id: v.id
        }))
      })
    },
    querySearch(queryString, cb) {
      const restaurants = this.restaurants
      let results = queryString
        ? restaurants.filter(v => v.value.includes(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    handleSelect(item) {
      this.userId = item.id
      this.userName = item.value
      this.item.userName = item.value
    },
    submit() {
      this.$refs['item'].validate(valid => {
        if (valid) {
          if(this.item.phone){
            this.item.phone.includes('*')? delete this.item.phone :''
          }
          if (!this.item.userName) {
            this.userId = null
          }
          const item = this.item
          let accept = this.item.accept
          let projectLeader = this.item.projectLeader
          delete this.item.accept
          delete this.item.projectLeader
          item.id = this.dataId
          this.$post({
            url: this.isCreate ? mmUrl.member.create : mmUrl.member.edit,
            data: {
              userId: this.userId,
              item: this.isCreate ? this.item : item,
              accept,
              projectLeader
            }
          }).then(() => {
            this.item = JSON.parse(JSON.stringify(item))
            this.$message({
              type: 'success',
              message: '新增成功'
            })
            this.$emit('closeDialog')
          })
        }
      })
    },
    checkConnect(rule, value, callback) {
      if (Boolean(value) === false) {
        callback()
      } else if (this.restaurants.some(v => v.value === value)) {
        callback()
      } else {
        callback(new Error('请输入正确的关联账户'))
      }
    }
  }
}
</script>

<style lang='scss' module>
.assignWidth {
  input {
    width: 180px;
  }
}
.select {
  margin-right: 5px;
}
</style>
